<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <meta name="author" content="wushen_zhong" />
  <meta name="viewport" content="width=device-width" />
  <title>EasyDesigner</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="./Oframework.mjs" type="module"></script>
</head>

<body>

  <div id="root" o:let="{ rightClickedElement: null }" o:oncontextmenu="{ event.preventDefault() }">

    <div id="rightClickMenu" class="bg-neutral-300 border-2 fixed hidden z-10 p-2" draggable="true" o:let="{ startOffsetX: 0, startOffsetY: 0 }"
      o:ondragstart="{ [$.startOffsetX, $.startOffsetY] = [event.offsetX, event.offsetY] }"
      o:ondragend="{ [this.style.left, this.style.top] = [`${this.offsetLeft + event.offsetX - $.startOffsetX}px`, `${this.offsetTop + event.offsetY - $.startOffsetY}px`]}">
      <div id="elePath"></div>
      <div class="flex" o:let="{ selectElement: null, copiedElement: null }">
        <div o:define="my-but" class="bg-white border border-neutral-500 p-0.5"></div>
        <my-but o:onclick="{ $.rightClickedElement.append(document.createElement('my-blo')) }">添加</my-but>
        <my-but o:onclick="{
          if($.rightClickedElement === document.getElementById('container'))
            return
          let parent = $.rightClickedElement.parentElement
          $.rightClickedElement.remove()
          parent.dispatchEvent(new MouseEvent('mouseup', { button: 2, bubbles: true }))
        }">
          删除
        </my-but>
        <my-but o:onclick="{ $.copiedElement = $.rightClickedElement.cloneNode(true) }" o:inject>
          ${$.copiedElement == null ? '' : '已'}复制
        </my-but>
        <my-but o:onclick="{
          if ($.copiedElement !== null) {
            $.rightClickedElement.append($.copiedElement)
            $.copiedElement = null
          }
        }">
          粘贴
        </my-but>
        <my-but o:onclick="{ $.selectElement = $.rightClickedElement }" o:inject>
          ${$.selectElement == null ? '' : '已'}选择
        </my-but>
        <my-but o:let="{
          createMutationObserver: (ele1, ele2) => {
            new MutationObserver((mutationRecordList, observer) => {
              if (ele1.className != mutationRecordList[0].target.className)
                ele1.className = mutationRecordList[0].target.className
            }).observe(ele2, { attributeFilter: ['class'] })
          }
        }" o:onclick="{
          if ($.selectElement !== null) {
            let ele1 = $.selectElement
            let ele2 = $.rightClickedElement
            $.createMutationObserver(ele1, ele2)
            $.createMutationObserver(ele2, ele1)
            $.selectElement = null
          }
        }">
          链接
        </my-but>
        <my-but o:onclick="{
          showOpenFilePicker()
            .then(fileSystemFileHandleArray => fileSystemFileHandleArray[0].getFile(), () => { })
            .then(file => file.text())
            .then(text => document.getElementById('container').outerHTML = text)
            .catch(() => {})
        }">
          打开
        </my-but>
        <my-but o:onclick="{
          showSaveFilePicker()
            .then(fileSystemFileHandle => fileSystemFileHandle.createWritable(), () => { })
            .then(fileSystemWritableFileStream => {
                fileSystemWritableFileStream.write(document.getElementById('container').outerHTML)
                fileSystemWritableFileStream.close()
            })
            .catch(() => {})
        }">
          保存
        </my-but>
      </div>
      <div>
        <div class="flex" o:let="{ index: 0 }">
          <div o:define="my-tab-but" class="border" o:let="{ i: 0 }" o:onclick="{
            const tabs = document.getElementById('tabs')
            for(const ele of tabs.children)
              ele.classList.add('hidden')
              tabs.children[$.i].classList.remove('hidden')
          }" o:init="{ $.i = $.index++ }">
          </div>
          <my-tab-but>元素</my-tab-but>
          <my-tab-but>类</my-tab-but>
          <my-tab-but>文本</my-tab-but>
        </div>
        <div id="tabs">
          <div o:define="my-tab" class="hidden"></div>
          <my-tab></my-tab>
          <my-tab o:init="{ this.classList.remove('hidden') }">
            <textarea id="classEditor" class="w-full h-[200px]" o:onkeyup="{ if (this.value != '') $.rightClickedElement.className = this.value }">
            </textarea>
          </my-tab>
          <my-tab>
            <textarea id="textEditor" class="w-full h-[200px]" o:onkeyup="{
              if (this.value == '')
                return
              for (const node of $.rightClickedElement.childNodes)
                if (node.nodeType == Node.TEXT_NODE)
                  $.rightClickedElement.removeChild(node)
              $.rightClickedElement.append(this.value)
            }">
            </textarea>
          </my-tab>
        </div>
      </div>
    </div>

    <div id="container" class="fixed h-full w-full" o:onmouseup="{
      const [rightClickMenu, elePath, classEditor, textEditor] =
        ['rightClickMenu', 'elePath', 'classEditor', 'textEditor'].map(id => document.getElementById(id))
      rightClickMenu.classList.add('hidden')
      if (event.button !== 2)
        return
      $.rightClickedElement = event.target
      let path = ''
      for (let ele = $.rightClickedElement; ele !== this; ele = ele.parentElement || ele.parentNode.host)
        path = '/' + ele.tagName.toLowerCase() + path
      elePath.textContent = '$' + path.slice(1)
      classEditor.value = $.rightClickedElement.className
      classEditor.focus()
      let temp = ''
      for (const node of $.rightClickedElement.childNodes)
        if (node.nodeType == Node.TEXT_NODE)
          temp += node.nodeValue
      textEditor.value = temp
      rightClickMenu.classList.remove('hidden')
    }">
      <div o:define="my-blo" class="bg-amber-950 h-20 w-20"></div>
    </div>

  </div>

</body>

</html>